<template>
    <g-scrollbar class="user">
        <div class="user-content">
            <!-- <g-breadcrumb :paths="paths"></g-breadcrumb> -->
            <div class="user-tabs">
                <div class="user-tabs-labels">
                    <div v-for="(tab, idx) in tabs" :key="idx" ref="tabs" class="user-tabs-label" :class="{ 'active': selected === tab.key }" @click="selectTab( tab.key, tab.name )">
                        <span>{{ tab.name }}</span>
                    </div>
                    <div class="user-tabs-labels-active" :style="activeStyle"></div>
                </div>
                <div class="user-tabs-panes">
                    <keep-alive>
                        <component :is="selected" :data="userData" @on-change="update"></component>
                    </keep-alive>
                </div>
            </div>
        </div>
    </g-scrollbar>
</template>

<script>

import Bus from '@/utils/event_bus'
import GScrollbar from '@/components/common/g-scrollbar'
import { user as userAPI } from '@/api'
import UserProfile from './user-profile'
import UserPlan from './user-plan'
import UserSecurity from './user-security'
import UserKey from './user-key'
import UserPortal from './user-portal'
import UserInvitation from './user-invitation'
import { getStyle } from '@/utils/dom'
import UserVoucher from './user-voucher'



export default {
    name: 'User',
    activated () {
        this.$emit( 'on-view-load' );
    },
    beforeRouteLeave ( to, from, next ) {
        window.removeEventListener( 'resize', this.updateTabWidth, false );
        this.$destroy();
        next();
    },
    created () {
        this.update();
        window.addEventListener( 'resize', this.updateTabWidth, false );
    },
    mounted () {
        this.updateTabWidth();

        let match = this.tabs.find( n => n.key === this.selected);
        if (match.name) {
            Bus.$emit('on-submenu-change', match.name);
        }
    },
    data () {

        let name = this.$route.params.name;
        let componentConf = this.$root && this.$root.componentConf ? this.$root.componentConf : null;
        let akManagement = componentConf && componentConf.personal_center ? 
            componentConf.personal_center.ak_management : null;
        let solutionManagement = componentConf && componentConf.personal_center ?
            componentConf.personal_center.solution_management : null;
        let tabs = [
            {
                key: 'profile',
                name: '个人信息',
            },
            {
                key: 'security',
                name: '安全管理'
            },
            // {
            //     key: 'plan', 
            //     name: '方案管理'
            // },
            // {
            //     key: 'voucher', 
            //     name: '优惠券'
            // },
            // {
            //     key: 'portal',
            //     name: '我的门户'
            // }
        ];
        if (akManagement != null && !akManagement) {
            let idx = tabs.findIndex((tab) => {
                return tab.key === 'key';
            });
            if (idx !== -1) {
                tabs.splice(idx, 1);
            }
        }
        if (solutionManagement != null && !solutionManagement) {
            let idx = tabs.findIndex((tab) => {
                return tab.key === 'plan';
            });
            if (idx !== -1) {
                tabs.splice(idx, 1);
            }
        }

        let selected = tabs[ 0 ].key;
        if ( !!name && tabs.findIndex( item => item.key === name ) >= 0 ) {
            selected = name;
        }

        return {
            userData: {},
            tabs,
            selected,
            tabOffset: 0
        }
    },
    watch: {
        '$route.params.name' ( name ) {
            if ( !!name && this.tabs.findIndex( item => item.key === name ) >= 0 ) {
                this.selected = name;
            }
        }
    },
    computed: {
        activeStyle () {  
            let offset = this.tabs.findIndex( item => item.key === this.selected ) * this.tabOffset;
            return `transform: translateX( ${ offset }px )`;
        },
    },
    methods: {
        updateTabWidth() {
            let dom = this.$refs.tabs[ 0 ];
            this.tabOffset = dom.offsetWidth + parseInt( getStyle( dom, 'marginRight' ) ) * 2;
        },
        selectTab ( key, name ) {
            this.$router.replace( { name: 'User', params: { name: key } } );
            Bus.$emit('on-submenu-change', name);
        },
        update () {
            let promise = userAPI.getProfile();
            promise.then( res => {

                if (!res) {
                    this.$message.error('获取用户信息失败');
                    return;
                }
                let data = res.data.data;
                
                let planName = this.$root.geohey.plan.find( item => item.name === data.plan.name ).alias;
                this.userData = data;
                this.userData.plan.alias = planName;
            } ).catch( err => {} )
        }
    },
    components: {
        GScrollbar,
        profile: UserProfile,
        plan: UserPlan,
        security: UserSecurity,
        key: UserKey,
        invite: UserInvitation,
        voucher: UserVoucher,
        portal: UserPortal,
        invite: UserInvitation
    }
}
</script>

<style lang="scss">
@import 'common';

.user {
    width: 100%;
    height: 100%;

    .user-content {
        padding: 40px 40px 0;
        width: 100%;

        @media screen and (max-width: 500px) {
            padding: 17px 17px 0;
            min-width: 340px;
        }

        .user-tabs {
            width: 100%;
            
            .user-tabs-labels {
                user-select: none;
                width: 100%;
                border-bottom: 2px solid $bdGray;
                position: relative;
                margin-bottom: 30px;

                &::after {
                    @include clearfix();
                }

                .user-tabs-labels-active {
                    position: absolute;
                    bottom: -2px;
                    width: 70px;
                    height: 2px;
                    background-color: $primary;
                    transform: translateX(0);
                    @include transition( transform .3s cubic-bezier(.645,.045,.355,1) );
                }

                .user-tabs-label {
                    float: left;
                    width: 70px;
                    margin: 0 10px;
                    height: 42px;
                    line-height: 42px;
                    text-align: center;
                    cursor: pointer;

                    &.active {
                        color: $primary;
                    }

                    &:first-child {
                        margin-left: 0;
                    }
                }
            }

            @media screen and (max-width: 460px) {
                .user-tabs-labels {
                    .user-tabs-label {
                        margin: 0 2px;
                    }
                }
            }

            .user-tabs-panes {
                max-width: 1300px;
            }

        }
    }
}
</style>
